import ArticleItem from '@/components/ArticleItem'

import styles from './index.module.scss'

import { InfiniteScroll } from 'antd-mobile'
import { useRef, useState } from 'react'
import { getArticleList } from '@/api/home'
import { ArticlesItem } from '@/types/data'
import { useHistory } from 'react-router-dom'
// 测试
// let count = 0

// async function mockRequest() {
//   if (count >= 3) {
//     return []
//   }
//   await sleep(2000)
//   count++
//   return [
//     'A',
//     'B',
//     'C',
//     'D',
//     'E',
//     'F',
//     'G',
//     'H',
//     'I',
//     'J',
//     'K',
//     'L',
//     'M',
//     'N',
//     'O',
//     'P',
//     'Q',
//   ]
// }
type Props = {
  channel_id: string
}
const ArticleList = ({ channel_id }: Props) => {
  const [data, setData] = useState<ArticlesItem[]>([])
  // 控制是否加载完成
  const [hasMore, setHasMore] = useState(true)
  // 保持时间戳数据
  const timestamp = useRef(Date.now())
  // 加载更多
  async function loadMore() {
    const append = await getArticleList({
      channel_id,
      timestamp: timestamp.current,
    })
    setData((val) => [...val, ...append.data.results])
    // append.data.pre_timestamp === null 不存在表示：没有数据
    if (append.data.pre_timestamp) {
      timestamp.current = append.data.pre_timestamp
    } else {
      setHasMore(false)
    }
  }
  // 跳转文章详情
  const history = useHistory()
  return (
    <div className={styles.root}>
      {/* 文章列表中的每一项 */}
      {data.map((item, index) => (
        <div
          key={item.art_id}
          className="article-item"
          onClick={() => history.push(`/article/${item.art_id}`)}>
          <ArticleItem type={item.cover.type} item={item} />
        </div>
      ))}
      {/*
        loadMore 加载数据的函数
        hasMore 布尔值，true 表示还有更多数据；false 表示没有更多数据了
      */}
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </div>
  )
}

export default ArticleList
